<template>
	<!--POP画册、POP下单、道具下单-->
	<view class="page-content">
		<view class="page-top">
			<!-- 标题栏和状态栏占位符 -->
			<view class="titleNview-placing"></view>
			<!-- 标题+筛选 -->
			<w-tit leftIcon="arrowleft" color="#595757" background="#fff" fontweight="600" :title="page_title"
				:rightIcon="user_statu.add_statu?'plusempty':''" @clickRight="clickRight">
			</w-tit>
		</view>
		<scroll-view class="page-body" :scroll-top="scrollTop" scroll-y="true" @scrolltolower="loadmore()">
			<!--动态-->
			<template v-if="sel_data && sel_data.length > 0 ">
				<template v-if="pageType === 'pro'">
					<!--置顶列表-->
					<view class="body-box">
						<block v-for="(item,index) in sel_data" :key="index">
							<view class="box-li" v-if="item.top===1">
								<pic-li :obj="item" :objstatu="user_statu" @toDet="toDet(item.id,item.name)"
									@replace_img="replace_img" @checked="checked" @deleted="deleted"></pic-li>
							</view>
						</block>
					</view>
					<!--不置顶列表-->
					<view class="body-box2">
						<block v-for="(item,index) in sel_data" :key="index">
							<view class="box-li" v-if="item.top===0">
								<pic-li :obj="item" :objstatu="user_statu" @toDet="toDet(item.id,item.name)"
									@replace_img="replace_img" @checked="checked" @deleted="deleted"></pic-li>
							</view>
						</block>
					</view>
				</template>
				<template v-else-if="pageType === 'pop' || pageType === 'prop'">
					<!--置顶列表-->
					<view class="body-box">
						<block v-for="(item,index) in sel_data" :key="index">
							<view class="box-li" v-if="item.top===1">
								<pic-li :obj="item" :objstatu="user_statu" @toDet="toDet(item.id,item.title)"
									@replace_img="replace_img" @checked="checked" @deleted="deleted"></pic-li>
							</view>
						</block>
					</view>
					<!--不置顶列表-->
					<view class="body-box2">
						<block v-for="(item,index) in sel_data" :key="index">
							<view class="box-li" v-if="item.top===0">
								<pic-li :obj="item" :objstatu="user_statu" @toDet="toDet(item.id,item.title)"
									@replace_img="replace_img" @checked="checked" @deleted="deleted"></pic-li>
							</view>
						</block>
					</view>
				</template>

				<!-- 上拉加载 -->
				<view class="det-con-more">
					<load-more :loadmore="load_more1"></load-more>
				</view>
			</template>
			<!--无数据-->
			<empty v-else no-full type="noData"></empty>
		</scroll-view>
		<!--编辑框-->
		<w-popup :show="showtip" :type="type1" @change="change1">
			<view class="w-tip">
				<view class="w-tit">提示</view>
				<view class="w-con">
					<view class="txt-row" v-if="tiptype === 1">是否取消置顶？</view>
					<view class="txt-row" v-else-if="tiptype === 2">是否确认删除？</view>
				</view>
				<view class="w-but">
					<view class="w-but-txt" @click="cancel('tip')">取消</view>
					<view class="w-but-txt" @click="confirm">确认</view>
				</view>
			</view>
		</w-popup>
	</view>
</template>

<script>
	import wTit from '@/components/w-tit/w-tit-back.vue'; //标题
	import loadMore from '@/components/uni-load-more/load-more.vue';
	import picLi from '@/pages/components/pic_book_li.vue';
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	import {
		getPictureAlbums, //画册列表
		topPictureAlbums, //置顶
		editPictureAlbums, //编辑
		addPictureAlbums, //增加
		delPictureAlbums, //删除
		
		editTasks, //pop编辑任务

		getTaskLists, //pop prop - 列表
		topTasks, //置顶
		delTasks, //删除
		getOssUploadsParams, //上传

	} from '@/common/api.js';
	export default {
		components: {
			loadMore,
			picLi,
			wTit
		},
		data() {
			return {
				showtip: false, //是否显示弹窗1
				content1: '顶部弹 popup',
				type1: '', //弹窗显示方式

				scrollTop: 0,
				noData: false,
				load_more1: '', //下拉加载文字
				load_sta: false, //是否是加载状态
				sel_data: [],
				pageType: '',
				userType: '', //system-首页 user-用户
				pageStatu: '0', //1-开权限 2-没有权限
				id: '',
				page_title: '',
				user_statu: {
					add_statu: false,
					replace_statu: false,
					stick_del_statu: false
				},
				params: {
					company_id: '',
				},
				params2: {
					company_id: '',
					type: ''
				},
				seltop: {
					id: '',
					top: ''
				},
				task_id: '',
				selType: '',
				selNum:'', //pop更换图册图片参数
				addType:'', //pop增加图册图片传参
				is_pro:'f',
				tiptype:0
			}
		},
		computed: {
			...mapGetters(['companyInfo', 'userInfo']),
		},
		onLoad(option) {
			console.log(222, option)
			this.params.company_id = this.companyInfo.id;
			this.params2.company_id = this.companyInfo.id;
			if (option.pageType === 'pro') {
				this.pageType = 'pro';
				if(option.is_pro){
					this.is_pro = option.is_pro;
				}
				// 导航栏标题
				this.page_title = 'POP画册';
				if (option.pageStatu === '1') {
					this.pageStatu = option.pageStatu
					this.user_statu = {
						add_statu: true,
						replace_statu: true,
						stick_del_statu: true
					}
				}
				if (option.userType) {
					this.userType = option.userType
				}
				this.getdata();

			} else if (option.pageType === 'pop') {
				this.pageType = 'pop';
				if (option.pageStatu === '1') {
					this.pageStatu = option.pageStatu
					this.user_statu = {
						add_statu: true,
						replace_statu: true,
						stick_del_statu: true
					}
				}
				
				if (option.userType) {
					this.userType = option.userType;
					if(option.userType === 'system'){
						// 导航栏标题
						this.page_title = 'POP下单';
					}else if(option.userType === 'user'){
						// 导航栏标题
						this.page_title = 'POP下单管理';
					}
				}
				this.getdata();
			} else if (option.pageType === 'prop') {
				this.pageType = 'prop';
				if (option.pageStatu === '1') {
					this.pageStatu = option.pageStatu
					this.user_statu = {
						add_statu: true,
						replace_statu: true,
						stick_del_statu: true
					}
				}
				if (option.userType) {
					this.userType = option.userType
					if(option.userType === 'system'){
						// 导航栏标题
						this.page_title = '道具下单';
					}else if(option.userType === 'user'){
						// 导航栏标题
						this.page_title = '道具下单管理';
					}
				}
				this.getdata();

			}
			if (option.task_id) {
				this.task_id = option.task_id;
			}
			if (option.selType) {
				this.selType = option.selType;
			}
			if(option.selNum){
				this.selNum = option.selNum;
			}
			if(option.addType){
				this.addType = option.addType
			}
		},
		methods: {
			resdata() {
				this.getdata();
			},
			//接口-获取列表
			getdata() {
				if (this.pageType === 'pro') {
					getPictureAlbums(this.params).then(res => {
						if (res.code === 2000) {
							this.sel_data = res.data.data
						}
					})
				} else if (this.pageType === 'pop') {
					this.params2.type = 1;
					getTaskLists(this.params2).then(res => {
						if (res.code === 2000) {
							this.sel_data = res.data.data
						}
					})
				} else if (this.pageType === 'prop') {
					this.params2.type = 2;
					getTaskLists(this.params2).then(res => {
						if (res.code === 2000) {
							this.sel_data = res.data.data
						}
					})
				}

			},
			//跳转详细页
			toDet(id, title) {
				if (this.pageType === 'pro') {
					uni.navigateTo({
						url: `/pages/picBook/picBookDet?id=${id}&title=${title}&userType=${this.userType}&pageType=pro&selType=${this.selType}&task_id=${this.task_id}&selNum=${this.selNum}&addType=${this.addType}&is_pro=${this.is_pro}`
					})
				} else if (this.pageType === 'pop') {
					if (this.userType === 'system') {
						uni.navigateTo({
							url: `/pages/order/PropCreateOrder?id=${id}&title=${title}&pageType=pop`
						})
					} else if (this.userType === 'user') {
						uni.navigateTo({
							url: `/pages/user/userCreateProp?id=${id}&title=${title}&pageType=pop` //&task_id=${this.task_id}&selType=${this.selType}
						})
					}

				} else if (this.pageType === 'prop') {
					console.log(2)
					if (this.userType === 'system') {
						uni.navigateTo({
							url: `/pages/order/PropCreateOrder?id=${id}&title=${title}&pageType=prop`
						})
					} else if (this.userType === 'user') {
						uni.navigateTo({
							url: `/pages/user/userCreateProp?id=${id}&title=${title}&pageType=prop`
						})
					}
				}

			},
			clickRight() {
				if (this.pageType === 'pro' || this.pageType === 'pop' || this.pageType === 'prop') {
					uni.navigateTo({
						url: `/pages/picBook/addPicBook?pageType=${this.pageType}`
					})
				}
			},
			//管理员替换封面
			replace_img(ite) {
				console.log(2233,ite)
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: this.sourceType,
					success: (tempFilePaths) => {
						
						console.log('选择文件：', tempFilePaths)
						let _self = this;
						uni.showLoading({
							title: '上传中'
						});
						let uploadImgs = [];
						getOssUploadsParams().then(res => {
							if (res.code === 2000) {
								tempFilePaths.tempFilePaths.forEach((item, index) => {
									uploadImgs.push(new Promise((resolve, reject) => {
										let file_path = item;
										let filename = tempFilePaths.tempFiles[index];
										let suffix = "." + _self.getCaption(filename.path);
										let file_name = new Date().getTime() + Math.random().toString(36).substring(3, 20) + suffix
										console.log(333333, file_name, filename)
										//上传图片接口
										uni.uploadFile({
											url: res.data.host,
											filePath: file_path,
											fileType: 'image',
											name: 'file',
											formData: {
												name: file_path,
												'key': res.data.dir + file_name,
												'policy': res.data.policy,
												'OSSAccessKeyId': res.data.accessid,
												'success_action_status': '200',
												//让服务端返回200,不然，默认会返回204
												'signature': res.data.signature,
											},
											success: (res2) => {
												resolve(res2);
												console.log('uploadImage success, res is:',res2)
												let imgs = ''
												imgs = res.data.host + '/' + res.data.dir + file_name;
												if(_self.sel_data && _self.sel_data.length>0){
													_self.sel_data.forEach(item2=>{
														if(item2.id === ite.id){
															item2.img = imgs
														}
													})
												}
												_self.$forceUpdate() //二维数组，开启强制渲染
												console.log('上传的图片',imgs)
												if(_self.pageType === 'pro'){
													let params={
														company_id:ite.company_id,
														name:ite.name,
														img:imgs,
														id:ite.id,
													}
													editPictureAlbums(params).then(res5=>{
														if(res5.code === 2000){
															uni.showToast({
																title:'修改成功！',
																icon:'none',
																duration:2000
															})
															this.getdata()
														}
													})
												}else if(_self.pageType === 'pop'){
													let params={
														company_id:ite.company_id,
														title:ite.title,
														type:ite.type,
														flow_path_id:ite.flow_path_id,
														img:imgs,
														id:ite.id,
													}
													editTasks(params).then(res5=>{
														if(res5.code === 2000){
															uni.showToast({
																title:'修改成功！',
																icon:'none',
																duration:2000
															})
															this.getdata()
														}
													})
												}
												
											},
											fail: (err) => {
												console.log(err);
												reject(err);
											},
											complete: () => {
												//uni.hideLoading();
											}
										});
									}))
									Promise.all(uploadImgs).then((results) => { //执行所有需请求的接口
											uni.hideLoading();
										})
										.catch((res3, object) => {
											uni.hideLoading();
										});
						
								})
							}
						})
					}
				});
				
			},
			getCaption(obj){
			    var index = obj.lastIndexOf("\.");
			    obj = obj.substring(index+1,obj.length);
			    return obj;
			},
			//删除
			deleted(id) {
				console.log(333, id)
				this.seltop.id = id;
				this.content1 = 'center'
				this.type1 = 'center';
				this.showtip = true;
				this.tiptype = 2;
			},
			//置顶
			checked(id, top) {
				if (this.pageType === 'pro') {
					let seltop = ''
					if (top === 0) {
						seltop = 1
						topPictureAlbums({
							id: id,
							top: seltop
						}).then(res => {
							if (res.code === 2000) {
								uni.showToast({
									title: '置顶成功！',
									icon: 'none',
									duration: 2000
								})
								this.getdata()
							}
						})
					} else if (top === 1) {
						this.seltop.id = id;
						this.seltop.top = 2;
						this.content1 = 'center'
						this.type1 = 'center';
						this.showtip = true;
						this.tiptype = 1;
					}
				} else if (this.pageType === 'pop' || this.pageType === 'prop') {
					let seltop = ''
					if (top === 0) {
						seltop = 1
						topTasks({
							id: id,
							top: seltop
						}).then(res => {
							if (res.code === 2000) {
								uni.showToast({
									title: '置顶成功！',
									icon: 'none',
									duration: 2000
								})
								this.getdata()
							}
						})
					} else if (top === 1) {
						this.seltop.id = id;
						this.seltop.top = 2;
						this.content1 = 'center'
						this.type1 = 'center';
						this.showtip = true;
						this.tiptype = 1;
					}
				}
			},
			loadmore() {

			},
			confirm() {
				if (this.pageType === 'pro') {
					if(this.tiptype === 1){
						topPictureAlbums(this.seltop).then(res => {
							if (res.code === 2000) {
								uni.showToast({
									title: '取消置顶成功！',
									icon: 'none',
									duration: 2000
								})
								this.getdata()
							}
						})
					}else if(this.tiptype === 2){
						delPictureAlbums({
							id: this.seltop.id
						}).then(res => {
							if (res.code === 2000) {
								uni.showToast({
									title: '删除成功！',
									icon: 'none',
									duration: 2000
								})
								this.getdata()
							}
						})
					}
					
				} else if (this.pageType === 'pop' || this.pageType === 'prop') {
					if(this.tiptype === 1){
						topTasks(this.seltop).then(res => {
							if (res.code === 2000) {
								uni.showToast({
									title: '取消置顶成功！',
									icon: 'none',
									duration: 2000
								})
								this.getdata()
							}
						})
					}else if(this.tiptype === 2){
						delTasks({
							id: this.seltop.id
						}).then(res => {
							if (res.code === 2000) {
								uni.showToast({
									title: '删除成功！',
									icon: 'none',
									duration: 2000
								})
								this.getdata()
							}
						})
					}
				}

				this.showtip = false;
			},
			change1(e) {
				if (!e.show) {
					this.showtip = false;
				}
			},
			//取消
			cancel(type) {
				this['show' + type] = false
			},
		}
	}
</script>

<style lang="scss">
	/* 提示窗口 */
	.w-tip {
		/* #ifndef APP-NVUE */
		display: flex;
		flex-direction: column;
		/* #endif */
		width: 70vw;
		border-radius: 10rpx;
		background-color: #fff;
		box-shadow: 0rpx 7rpx 7rpx 0rpx rgba(0, 0, 0, 0.1);
		margin: 30rpx auto 0;

		.w-tit {
			font-size: 36rpx;
			font-weight: bold;
			color: $font-color-3;
			line-height: 60rpx;
			height: 60rpx;
			margin-top: 20rpx;
			text-align: center;
		}

		.w-but {
			display: flex;
			font-size: 32rpx;
			font-weight: 400;
			color: $font-color-b3;
			height: 84rpx;
			line-height: 84rpx;

			.w-but-txt {
				flex: 1;
				text-align: center;
				border-right: 1rpx solid #f5f5f5;
			}

			.w-but-txt:last-of-type {
				border-right: none;
			}
		}

		.w-con {
			display: flex;
			text-align: center;
			font-weight: 400;
			padding: 30rpx 30rpx;
			border-bottom: 1rpx solid #f5f5f5;

			.txt-row {
				width: 100%;
				text-align: center;
				font-size: 28rpx;
				color: $font-color-9;
			}
		}
	}

	.titleNview-placing {
		height: var(--status-bar-height);
		box-sizing: content-box;
		background: $uni-bg-color;
		display: block;
		position: sticky;
		top: 0rpx;
		z-index: 9999;
		overflow: hidden
	}

	.page-content {
		width: 100vw;
		height: 100%;
		background: $uni-bg-color-grey;

		.page-top {
			display: flex;
			flex-direction: column;
			box-sizing: content-box;
			background: $uni-bg-color;
			display: block;
			position: sticky;
			top: 0rpx;
			z-index: 9999;
			border-bottom: 1rpx solid #F2F4F5;
		}

		.page-body {
			display: flex;
			height: calc(100% - 90rpx - var(--status-bar-height));

			.body-box2 {
				margin-top: 20rpx;
			}

			.body-box,
			.body-box2 {
				display: flex;
				flex-direction: column;
				background: $uni-bg-color;

				.box-li {
					padding: 30rpx 30rpx 0 30rpx;
					border-bottom: 1rpx solid #F2F4F5;
					margin-bottom: 30rpx;
				}

				.box-li:last-of-type {
					border-bottom: none;
					margin-bottom: 0rpx;
				}
			}

			.con-text {
				display: flex;
				flex-direction: column;
				font-size: 28rpx;
				color: #666;
				line-height: 50rpx;

				image {
					width: 100% !important;
					max-width: 100% !important;
				}
			}
		}
	}
</style>
